<template>
  <div id="DeviceManagementReport">
    <h2 style="text-align: center">设备管理看板</h2>
    <div class="row">
      <div class="row-left gradient-border c1">
        <!--整线设备故障率-->
        <div id="FailureRate" ref="FailureRateCom" style="width: 100%;height: 100%">
        </div>
        <div class="FailureRate-form">
          <!--          <el-input/>-->
          <el-form inline>
            <el-form-item label="选择日期">
              <el-date-picker size="small" v-model="FailureRateDate" @change="changeFailureRateDate"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="row-right gradient-border c1">
        <!--设备实时状态-->
        <div id="DeviceStatus" ref="DeviceStatusCom" style="width: 100%;height: 100%">
        </div>
        <!--        <div class="DeviceStatus-form">-->
        <!--          <el-input/>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="row">
      <div class="row-left gradient-border c1">
        <!--单机故障-->
        <div id="MachineFailureRate">
          <div class="MachineFailureRate-item" ref="chartsListCom" v-for="item in MachineFailureRateOptions">
            <ChartCom :option="item.option1" style="width: 100%;height: 50%"/>
            <ChartCom :option="item.option2" style="width: 100%;height: 50%"/>
          </div>
        </div>
        <div class="MachineFailureRate-form">
          <el-form inline :model="states">
            <el-form-item label="故障时间">
              <el-date-picker size="small" style="width: 120px;" v-model="states.MachineFailureRateDate"
                              @change="changeMachineFailureRateDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="故障设备">
              <el-select size="small" style="width: 120px" v-model="states.MachineFailureRateDevice"
                         @change="changeMachineFailureRateDevice">
                <el-option v-for="item in DeviceOptions" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <h3 style="position: absolute;left: 50%;transform: translateX(-50%)">单机故障</h3>
        </div>
      </div>
      <div class="row-right gradient-border c1">
        <!--设备停机报警信息-->
        <div id="EquipmentShutdownInfo">
          <ChartCom :option="EquipmentShutdownInfo.option1" style="width: 100%;height: 50%"/>
          <ChartCom :option="EquipmentShutdownInfo.option2" style="width: 100%;height: 50%"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {FailureRate, DeviceStatus, MachineFailureRate, EquipmentShutdownInfo} from './mock'
import {onMounted, reactive, ref} from 'vue'
import * as echarts from "echarts";
import ChartCom from './components/chartCom.vue'

const FailureRateCom = ref(null)
const DeviceStatusCom = ref(null)
const chartsListCom = ref(null)

const FailureRateDate = ref(null)

// 日期 设备
const states = reactive({
  MachineFailureRateDate: '',
  MachineFailureRateDevice: ''
})
// const MachineFailureRateDate = ref(null)
// const MachineFailureRateDevice = ref(null)

const DeviceOptions = ref([
  {
    label: '全部',
    value: 'all'
  },
  {
    label: '设备1',
    value: '1'
  }
])

const MachineFailureRateOptions = ref(MachineFailureRate)

let FailureRateChart, DeviceStatusChart


// 初始化&更新 【整线设备故障率】
const initFailureRateCom = () => {
  if (!FailureRateChart) {
    FailureRateChart = echarts.init(FailureRateCom.value);
    FailureRate && FailureRateChart.setOption(FailureRate);
  } else {
    FailureRateChart.clear()
    FailureRateChart.setOption(FailureRate);
  }
}

// 更改 整线设备故障率时间
const changeFailureRateDate = (val) => {
  console.log('整线设备故障率', val)
  initFailureRateCom()
}

// 初始化&更新 【设备实时状态】
const initDeviceStatusCom = () => {
  if (!DeviceStatusChart) {
    DeviceStatusChart = echarts.init(DeviceStatusCom.value);
    DeviceStatus && DeviceStatusChart.setOption(DeviceStatus);
  } else {

    DeviceStatusChart.clear()
    DeviceStatusChart.setOption(DeviceStatus);
  }
}

const changeMachineFailureRateDate = () => {

  MachineFailureRateOptions.value = {}
  setTimeout(() => {
    MachineFailureRateOptions.value = MachineFailureRate
  }, 500)
}
const changeMachineFailureRateDevice = () => {

  MachineFailureRateOptions.value = {}
  setTimeout(() => {
    MachineFailureRateOptions.value = MachineFailureRate
  }, 500)
}

onMounted(() => {
  initFailureRateCom()
  initDeviceStatusCom()
})
</script>

<style scoped>
#DeviceManagementReport {
  height: 100vh;
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
  margin: auto;

  .gradient-border {
    width: 200px;
    height: 100px;
    border: 6px solid;
    border-image: linear-gradient(#ccd9f1, #095bb7) 20;
  }

  .row {
    display: flex;
    width: 100%;
    height: calc((100% - 32px) / 2);
    padding: 10px;

    .row-left {
      width: 70%;
      height: 100%;
    }

    .row-right {
      margin-left: 0.5%;
      width: 29%;
      height: 100%;
    }
  }

  .c1 {
    position: relative;
    z-index: 2;

    .FailureRate-form {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }

    .DeviceStatus-form {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }

    .MachineFailureRate-form {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      width: 100%;
      height: 50px;
      display: flex;
    }
  }

  #MachineFailureRate {
    display: flex;
    height: 100%;
    overflow: auto;
    flex-wrap: wrap;

    .MachineFailureRate-item {
      width: 33.33%;
      height: 100%;
      padding-top: 50px;
    }
  }

  #EquipmentShutdownInfo {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    flex-direction: column;
    overflow: hidden;
    align-items: center;

  }

}
</style>